<template>
	<GlobalHeader
		:text="$t('hyg.pumpOperatingParameters')"
		xh="CW6250C1360DF7"
		xlh="2522L000026"
		:hour="null"
		path="/equipment/rhost/2"></GlobalHeader>
	<div class="hyb-table" style="margin-top: 100px">
		<div class="dataList" v-for="(item, index) in hyb" :key="index">
			<div>
				<div>
					<span>{{ $t('hyg.pumpBody') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(601, index, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.frontBearing') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(602, index, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.rearBearing') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(603, index, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpShaft') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(604, index, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpInlet') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(605, index, 2)) }}bar</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpOutlet') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(606, index, 2)) }}bar</span>
				</div>
				<div>
					<span>累时:</span>
					<span>{{ isEmptyToCharacter(hybData(607, index, 0)) }}h</span>
				</div>
			</div>
			<div class="equipImg">
				<div style="position: relative">
					<img :src="huoyou" style="width: 100%; height: 100%" />
					<BlinkingLight
						v-if="Lighthyb(hybData(606, index, 2))"
						:isBlinking="false"
						:position="true"
						:top="35"
						:left="93"
						:customStyle="{ width: '35px', height: '35px' }"></BlinkingLight>
				</div>
				<p>{{ item.text }}</p>
			</div>
		</div>

		<div>
			<div class="dataList">
				<div>
					<span>{{ $t('hyg.pumpBody') }}:</span>
					<span>{{ isEmptyToCharacter(scbData(625, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('public.bearing') }}:</span>
					<span>{{ isEmptyToCharacter(scbData(626, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpShaft') }}:</span>
					<span>{{ isEmptyToCharacter(scbData(627, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpInlet') }}:</span>
					<span>{{ isEmptyToCharacter(scbData(629, 2)) }}bar</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpOutlet') }}:</span>
					<span>{{ isEmptyToCharacter(scbData(630, 2)) }}bar</span>
				</div>
				<div>
					<span>累时:</span>
					<span>{{ isEmptyToCharacter(scbData(631, 2)) }}h</span>
				</div>
			</div>
			<div class="equipImg">
				<div style="position: relative">
					<img :src="huoyou" style="width: 100%; height: 100%" />
					<BlinkingLight
						v-if="Lighthyb(scbData(630, 2))"
						:isBlinking="false"
						:position="true"
						:top="35"
						:customStyle="{ width: '35px', height: '35px' }"
						:left="93"></BlinkingLight>
				</div>
				<p>{{ $t('hyg.sweepingPump') }}</p>
			</div>
		</div>

		<div class="dataList" v-for="(item, index) in yzb" :key="index">
			<div>
				<div>
					<span>{{ $t('hyg.pumpBody') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(633, index, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('public.bearing') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(634, index, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpShaft') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(635, index, 1)) }}℃</span>
				</div>
				<div>
					<span>{{ $t('hyg.pumpOutlet') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(638, index, 2)) }}bar</span>
				</div>
				<div>
					<span>{{ $t('public.vTime') }}:</span>
					<span>{{ isEmptyToCharacter(hybData(639, index, 2)) }}h</span>
				</div>
			</div>
			<div class="equipImg">
				<div style="position: relative">
					<img :src="yalizai" style="width: 100%; height: 100%" />
					<BlinkingLight
						v-if="Lighthyb(hybData(638, index, 2))"
						:isBlinking="false"
						:position="true"
						:top="55"
						:left="140"
						:customStyle="{ width: '35px', height: '35px' }"></BlinkingLight>
				</div>
				<p>{{ item.text }}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import GlobalHeader from './layout/GlobalHeader.vue'
import { initDecimalPlaces } from '@/utils/utils.js'
import { isEmptyToCharacter } from '@/plugins/index.js'
import huoyou from '@/assets/image/huoyou.png'
import yalizai from '@/assets/image/yalizai.jpg'
import BlinkingLight from '@/components/BlinkingLight.vue'
import { useI18n } from 'vue-i18n'
const Lighthyb = computed(() => {
	return (value) => {
		return value > 3 ? true : false
	}
})
const { t } = useI18n()
let allData = inject('allData')
let pumpDataList = ref(null)
let hyb = ref([
	{ text: `1#${t('hyg.cargoOilPump')}`, num: 8, sort: 601, time: 'z607' },
	{ text: `2#${t('hyg.cargoOilPump')}`, num: 8, sort: 609, time: 'z615' },
	{ text: `3#${t('hyg.cargoOilPump')}`, num: 8, sort: 617, time: 'z623' }
])
let yzb = ref([
	{ text: `1#${t('hyg.ballastPump')}`, num: 8, sort: 633, time: 'z639' },
	{ text: `2#${t('hyg.ballastPump')}`, num: 8, sort: 641, time: 'z647' }
])
let h = ref(0)
let hybData = computed(() => {
	return (sort, index, n) => {
		let sorts = 'z' + (sort + index * 8)
		if (!pumpDataList.value) return initDecimalPlaces(n)
		return pumpDataList?.value[sorts]?.currentValue || initDecimalPlaces(n)
	}
})

let scbData = computed(() => {
	return (sort, n) => {
		let sorts = 'z' + sort
		if (!pumpDataList.value) return initDecimalPlaces(n)
		return pumpDataList?.value[sorts]?.currentValue || initDecimalPlaces(n)
	}
})
onBeforeRouteUpdate((to) => {
	id.value = to.params.id - 1
})
watch(
	() => allData.value,
	(newVal, oldVal) => {
		let pumpInitData = newVal.hyb || {}
		pumpDataList.value = pumpInitData
	},
	{
		deep: true
	}
)
</script>

<style scoped lang="scss">
.hyb-table {
	display: flex;
	justify-content: center;
	// align-items: center;
	font-size: 25px;
	color: #fff;
	.dataList {
		margin: 0 10px;
	}
	div {
		margin: 7px 0;
	}
	span {
		display: inline-block;
	}
	span:nth-child(1) {
		width: 100px;
	}
	span:nth-child(2) {
		text-align: right;
		width: 80px;
	}
	.equipImg {
		width: 200px;
		height: 250px;
		// background: #000;
		text-align: center;
		div {
			height: 150px;
			width: 100%;
		}
	}
}
</style>
